<template>
  <div>
    <el-card class="box-card" style="margin: 15px;">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="input">
            <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px;">
                <el-option label="商品编号" value="num"></el-option>
                <el-option label="商品名称" value="name"></el-option>
                <el-option label="所属类别" value="category"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" v-on:click="searchdata"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
</el-card>
      <el-card style="margin: 15px;">
      <el-row>
        <el-col :span="9">
          <div>
           <el-button type="warning" icon="el-icon-edit" v-on:click="toaddpage()">新增商品</el-button>
           <el-button type="danger" icon="el-icon-delete" @click="test()">批量删除</el-button>
           <el-button type="success" icon="el-icon-close" @click="toggleSelection()">取消选择</el-button>
           <el-button type="primary" icon="el-icon-refresh-right" @click="renewdata()">刷新数据</el-button>
          </div>
        </el-col>
      </el-row>
    <div class="datatable" style="margin-top:20px;min-height: 345px;">
        <el-table
        ref="table"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            prop="num"
            label="商品编号"
            width="110">
            </el-table-column>
            <el-table-column
            prop="name"
            label="商品名称"
            width="130">
            </el-table-column>
            <el-table-column
            prop="category"
            label="所属类别"
            width="140">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.category === '水果' ? 'primary' : scope.row.category === '米类'?'success':'warning'"
                  disable-transitions>{{scope.row.category||'无'}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
            prop="price"
            label="商品单价"
            sortable
            width="140">
            </el-table-column>
            <el-table-column
            prop="sum"
            label="上架数量"
            sortable
            width="140">
            </el-table-column>
            <el-table-column
            prop="details"
            label="商品描述"
            :show-overflow-tooltip="true"
            width="380">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>
    <el-pagination
      :total="total"
      :page-size="itemnum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 12]"
      layout="total, sizes, prev, pager, next, jumper"
      background
      style="margin-top:20px;"
      >
    </el-pagination>
  </el-card>
  
  </div>
</template>

<script>
import { getgoods,searchgood } from '@/api';
import { mapMutations } from 'vuex' 
export default {
    name:'list',
    data() {
      return {
        search:'',
        select:'',
        total:0,
        itemnum:10,
        tableData: [],
        //做批量删除
        multipleSelection: [],
      }
    },
    methods:{
      ...mapMutations('add',['editgoodsrowdata','edittype']),
      searchdata(){
        console.log(this.select)
        console.log(this.search)
        if(this.select===''||this.search===''){
          this.$notify({
            title: '警告',
            message: '请选择查找类别或输入查找内容！',
            type: 'warning',
            duration: 2500
          });
        this.search = ''
        this.select = ''
        }
        else{
          searchgood({searchtype:this.select,indexdata:this.search}).then(res => {
          if(res.data.status!==200){
            this.$notify.error({
            title: '错误',
            message: '找不到数据，请核实输入！',
            duration: 2500
          });
          }else{
            this.search = ''
            this.select = ''
            this.tableData = res.data.data
            this.$notify({
              title: '成功',
              message: '已为您找到该数据',
              type: 'success'
            });
          }}).catch(err => console.log(err))
        }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.table.toggleRowSelection(row);
          });
        } else {
          this.$refs.table.clearSelection();
        }
      },
      handleEdit(index,row){
        this.editgoodsrowdata(row),
        this.edittype('edit')
        this.$router.push('/goodadded')
      },
      handleDelete(index, el){
        //el.num可以获取到当前数据的商品编号，此编号在数据库中唯一，index获取到的是当前数据在表格数据中的索引号
        this.$confirm('将永久删除该数据, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //假删
          this.tableData.splice(index,1)
          this.$message({
            type: 'success',
            message: '已删除'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      //传递当前表格单选框勾选的元素，事件绑定在单选框发生改变时触发
      handleSelectionChange(val) {
        this.multipleSelection = val
        console.log(this.multipleSelection)
      },
      //批量删除只做在商品页面里
      test(){
        console.log(this.multipleSelection)
        if(this.multipleSelection.length===0) 
        this.$notify({
            title: '警告',
            message: '请先选中要删除的元素！',
            type: 'warning',
            duration: 2500
          });
        else
        this.$confirm('将永久删除选中的数据, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //关键语句不会做
          this.tableData.splice()
          this.$message({
            type: 'success',
            message: '已删除'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      handleCurrentChange(val){
        const va = (val-1)*this.itemnum
        //重新向数据库获取指定偏移量的数据
        this.gettabledata({offset:va,limit:this.itemnum})
      },
      //表单条数改变时传递条数信息
      handleSizeChange(val){
        this.itemnum = val
        this.gettabledata({limit:val})
      },
      gettabledata(config){
        getgoods(config).then(res => {
          this.tableData = res.data.data
          this.total = res.data.total
        }).catch(err => {console.log(err)})
      },
      toaddpage(){
        this.edittype('add')
        this.$router.push('/goodadded')
      },
      renewdata(){
        this.$notify.info({
          title: '消息',
          message: '正在重新渲染数据请耐心等待'
        });
        setTimeout(() => {
          this.gettabledata()
          this.$notify({
          title: '成功',
          message: '渲染成功',
          type: 'success'
        });
        },2500);
      }
      },
      mounted() {
        this.gettabledata()
      },
    }

</script>

<style>

</style>